<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css"  media="all">
    <link rel="stylesheet" href="css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
    <style>
        .layui-tab-content {
            padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
        }
        .show-frame {
            top: 50px!important;
            /*默认.layui-layout-admin .layui-body {
                top: 60px;
                bottom: 44px;
            }*/
            overflow: hidden;/*消除浏览器最右边的滚动条*/
        }
        .frame {
            position: absolute;
            padding: 10px;/*与layui-footer隔开一段距离*/
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <%--<img src="http://t.cn/RCzsdCq" class="layui-nav-img">--%>
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test" id="ulid">

            </ul>
        </div>
    </div>

    <div class="layui-body show-frame">
        <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this"><i class="layui-icon">&#xe68e;</i></li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">欢迎页面</div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
</div>
<script src="js/jquery-1.8.3.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        $.ajax({
            url:"menu/selectAll",
            dataType:"json",
            success:function(result){
                var str='';
                var s='';
                var res=result;
                $(res).each(function (index,obj) {
                    str +="<li class=\"layui-nav-item layui-nav-itemed\">\n" +
                        "<a class=\"\" href=\"javascript:;\">"+obj.name+"</a>\n" +
                        "<dl id='"+obj.id+"' class=\"layui-nav-child\">";
                    $(obj.menus).each(function(index,atr){
                        s +="<dd><a onclick='addTab(\""+atr.name+"\",\""+atr.url+"\","+atr.id+")' href=\"javascript:;\" " +
                            "name=\"t1\" id="+atr.id+" title='"+atr.name+"' content='"+atr.url+"'>"+atr.name+"</a></dd>";
                    })
                    str += s;
                    str +="</dl>\n"+"</li>";
                    s='';
                })
                    $("#ulid").append(str);
                    element.render('nav');
                    // element.render('nav',$('#ulid').attr('lay-filter'));
            }
        })

    });
    function addTab(menuName,menuUrl,menuId) {
        console.info(menuName)
        console.info(menuUrl)
        console.info(menuId)
        layui.use('element', function(){
            var element = layui.element;
            // 添加选项卡
            element.tabAdd('demo', {
                title: menuName
                , content:'<iframe src="${pageContext.request.contextPath}/'+menuUrl+'" class="frame"  frameborder="0"></iframe>'
                ,id: menuId
            });
            // 切换到选项卡上
            element.tabChange('demo', menuId);
        });
    }
</script>
</body>
</html>
